@use "@/assets/scss/index.scss" as globalVar;
$gainsboro_ddd: globalVar.$color-border-00;
$mediumseagreen_339e56: globalVar.$color-green-01;

.el-overlay {
  &.is-message-box {
    .el-overlay-message-box {
      .el-message-box {
        padding: 0 50px 10px;
        border: none;

        .el-message-box__headerbtn {
          .el-message-box__close {
            font-family: "iconfont" !important;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            font-size: 25px !important;
            cursor: pointer;
            font-weight: 400;
            color: $mediumseagreen_339e56;
            svg {
              display: none;
            }

            &:before {
              content: "\e603";
            }
          }
        }

        .el-message-box__btns {
          padding: 10px 0;
          transform: translate(-30px, 0);
          width: 480px;
        }

        .el-message-box__content {
          padding: 0;
          transform: translate(-30px, 0);
          width: 480px;
        }

        .el-message-box__header {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 10px;
          position: relative;
          font-size: 20px;
          height: 55px;
          line-height: 55px;
          padding: 10px 0 10px 16px;
          box-sizing: border-box;
          border-bottom: 1px solid $gainsboro_ddd;
          width: 480px;
          transform: translate(-30px, 0);

          &:before {
            background: $mediumseagreen_339e56;
            border-radius: 2px;
            content: "";
            height: 18px;
            left: 0;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 6px;
          }

          .el-message-box__title {
            font-weight: 500;
          }

          .el-message-box__headerbtn {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
          }
        }
      }
    }
  }
}
